<template>
    <div class="online-message-list">
        <div class="list-menu">
          <span class="active">我的估价</span>
          <span>估价列表</span>
        </div>
        <div class="container" v-for="item in 8" :key="item">
          <div class="item-top">
            <span class="avator"><img src="~@/assets/logo.png" alt=""></span><span>Besideyou</span>
          </div>
            <div class="list-item" >
                <div class="left-img">
                  <img src="~@/assets/logo.png" alt="">
                </div>
                <router-link to="/OnlineMessage/detail" class="right-content">
                    <div class="content">
                      文字标题 文字标题 文字标题 文字标题 文字标题 文字标题 文字标题 文字标题 文字标题 文字标题 文字标题 文字标题 文字标题 文字标题 文字标题
                    </div>
                </router-link>
            </div>
          <div class="content-bottom">
            <span class="replay">回复(11)</span><span class="timer">创建时间:2019年10月15日16:11</span>
          </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {}
        },
        created() {
          console.log(this.$route.meta.title)
          this.$store.commit("setTitle",this.$route.meta.title)
        }
    }
</script>

<style scoped lang="scss">
.online-message-list{
  box-sizing: border-box;
  padding: 10px 16px;
  .list-menu{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    height: 40px;
    line-height: 40px;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    span{
      flex: 1;
      text-align: center;
      &.active{
        border-bottom: 2px solid #3479DF;
      }
    }
  }
  .item-top{
    margin: 6px auto 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
    span{
      display: inline-block;
      vertical-align: middle;
      &:first-child{
        height: 36px;
        width: 36px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden;
        background: #eee;
      }
      &:last-child{
        margin-left: 10px;
        font-size: 14px;
        font-weight: 600;
      }
      img{
        height: 36px;
        width: 36px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
      }
    }
  }
  .list-item{
    display: flex;
    align-items: center;
    margin-top: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;

    .left-img{
      flex: 0 0 60px;
      width: 60px;
      margin-right: 10px;
      border: 1px solid #eee;
      img{
        width: 58px;
        height: 58px;
      }
    }
    .right-content{
      flex: 1;
      overflow: hidden;
      .content{
        padding: 6px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:3;
        -line-clamp:3;
      }
    }
  }
  .content-bottom{
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 8px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    .replay{
      cursor: pointer;
    }
    .timer{
      overflow: hidden;
      -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
    }
  }
}
</style>
